RxJs 是一個用於處理非同步資料流的函式庫，在 Angular 中被廣泛使用，特別是在處理 HTTP 請求、事件和其他非同步操作時。

今天僅會介紹一些 RxJs 的基本概念和用法，RxJs 中還有提供許多功能可以對 Observable 進行操作，可以參考官方文件或其他資源來深入了解。

Observable

RxJs 的核心概念是 Observable（可觀察對象），它代表一個可以發射多個值的資料流。可以是同步的，也可以是非同步的。

建立方式

需要透過實例化 Observable 類別來建立一個 Observable，會在建構函式中傳入一個回呼函式，這個函式會接收一個 subscriber 物件，透過這個物件可以發射值、錯誤或完成通知。

• next： 用來發射下一個值，在訂閱期間可以使用任意次數 。
• error： 用來發射錯誤通知，會終止 Observable，並且最多只能發射一次錯誤。
• complete： 用來發射完成通知，表示已經完成，和錯誤一樣，最多只能發射一次。

慣例上，Observable 變數名稱通常會以 $ 結尾，以表示它是一個 Observable。

import { Observable } from 'rxjs';
const observable$ = new Observable<string>(subscriber => {
	// 可以在這裡發射值
	subscriber.next('Hello');
	// 模擬非同步操作
	setTimeout(() => {
		subscriber.next('RxJS');
		subscriber.complete(); // 完成發射
	}, 1000);
	return () => {
		// 這裡是 Teardown 邏輯，可以用來釋放資源
		console.log('Teardown');
	};
});

在使用者主動呼叫 unsubscribe() 取消訂閱、 complete 或 error 通知後，Observable
會進入 Teardown 階段，這個階段可以用來釋放資源，例如：取消計時器，避免會持續執行。

const observable$ = new Observable<string>(subscriber => {
  let count = 0;
  const intervalId = setInterval(() => {
		subscriber.next(`Count: ${count++}`);
		if (count > 5) {
			subscriber.complete(); // 完成發射
		}
	}, 1000);
	return () => {
		// 清除計時器
		clearInterval(intervalId);
		console.log('Teardown');
	};
});

使用方式

在使用時，會使用 subscribe 方法來訂閱 Observable

• 傳入一個回呼函式，這個函式會在每次發射值時被呼叫。

observable$.subscribe(value => {
	console.log(value);
});

也可以傳入一個觀察者物件，這個物件可以定義三個方法，可以分別處理不同的通知：

• next： 可取得發射的值，用來處理資料。
• error： 可取得錯誤物件，用來處理錯誤。
• complete： 沒有參數傳入，用來處理完成通知。

observable$.subscribe({
  next: value => console.log(value),
  error: err => console.log(err.message),
  complete: () => console.log('Completed')
});

在元件中使用時，通常會在 ngOnInit 生命週期中訂閱，並在 ngOnDestroy 中取消訂閱，以避免記憶體洩漏。

• 訂閱後會回傳一個 Subscription 物件，可以其中的 unsubscribe 方法來取消訂閱。

export class MyComponent implements OnInit, OnDestroy {
	private subscription: Subscription;
	
	const observable$ = ...

	ngOnInit() {
		this.subscription = observable$.subscribe(value => {
			console.log(value);
		});
	}

	ngOnDestroy() {
		this.subscription.unsubscribe(); // 取消訂閱
	}
}

預處理

RxJS 提供了許多操作符來對 Observable 進行轉換、過濾、合併等操作，這些操作符可以通過 pipe 方法來鏈接，並創建一個新的 Observable。若有多個操作符的話，可以用逗號,分隔。

• map： 用來轉換發射的值。
• catchError： 用來捕捉錯誤並進行處理，需要回傳一個新的 Observable。

pipe 是組合操作符，需要放在 subscribe 之前，當 subscribe 被調用時，上面的所有操作符才會開始執行

// 在 pipe 中使用 map 操作符
observable$.pipe(
	map(value => value.toUpperCase()), // 將值轉換為大寫
	catchError(err => {
		console.error('Error occurred:', err); // 可以記錄錯誤
		return throwError(() => new Error('新的錯誤訊息')); 
	})
).subscribe({
   next: (value) => {console.log(value) }, // 轉換後的值
   error: (err) => {console.error(err) }, // 得到處理後的錯誤訊息
 });

pipe 可以無限鏈接操作符，並且會依照順序執行

• tap： 用來偵測每次發射的值，但不會改變值，也可以傳入觀察者物件，用 next、error、complete 方法來偵測不同的通知。
• filter： 用來過濾發射的值，只有符合條件的值才會被發射。

apiObservable$.pipe(
	tap(value => console.log('Received:', value)), // 偵測每次發射的值
).pipe(
	filter(value => value.active), // 過濾條件
).subscribe({
	 next: (value) => {console.log(value) }, // 過濾後的值
});

結論

今天介紹了 RxJS 的基本概念和用法，特別是 Observable 的建立和使用方式。明天會介紹如何在Ａngular 中使用非同步資料處理。